<template>
  <!-- 通用订单信息 -->
  <div class="card">
    <dl class="row">
      <dt class="col-4 text-end">账单号</dt>
      <dd class="col-8">{{ detailInfo.billNum }}</dd>
      <dt class="col-4 text-end">日期</dt>
      <dd class="col-8">
        {{ detailInfo.opDate }}
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editOpDate(detailInfo.opDate)"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>
      <dt class="col-4 text-end">国际</dt>
      <dd class="col-8">
        <span v-if="detailInfo.intlTicket === 0">国内</span>
        <span class="text-danger" v-else-if="detailInfo.intlTicket === 1"
          >国际</span
        >
      </dd>
      <dt class="col-4 text-end">客户/成本中心/项目</dt>
      <dd class="col-8">
        <template v-if="detailInfo.customerType === 0">散客</template>
        <template v-else-if="detailInfo.customer !== null">{{
          detailInfo.customer.vipName
        }}</template>
        /{{ detailInfo.costCenter }}/{{ detailInfo.projectName }}
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="changeCustomer()"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>

      <dt class="col-4 text-end">出票日期</dt>
      <dd class="col-8">
        {{ detailInfo.etdzDate }}
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editEtdzDate(detailInfo.etdzDate)"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>
      <dt class="col-4 text-end">订票员</dt>
      <dd class="col-8">
        {{ detailInfo.op1 }}
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editOp1(detailInfo.op1)"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>
      <dt class="col-4 text-end">出票员</dt>
      <dd class="col-8">{{ detailInfo.op2 }}</dd>
      <dt class="col-4 text-end">审核人</dt>
      <dd class="col-8">{{ detailInfo.op3 }}</dd>
      <dt class="col-4 text-end">供应商</dt>
      <dd class="col-8">
        <template v-if="detailInfo.supplier !== null">
          {{ detailInfo.supplier.name }}
        </template>
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editSupplier()"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>
      <dt class="col-4 text-end">付款方式</dt>
      <dd class="col-8">
        <template v-if="detailInfo.paymentMethod !== null">
          {{ detailInfo.paymentMethod.name }}
        </template>
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editPayment()"
            class="small float-end me-2"
            >修改</a
          >
        </template>
      </dd>
      <dt class="col-4 text-end">收款方式</dt>
      <dd class="col-8">
        <span class="text-danger" v-if="detailInfo.bePaid === '0'">
          {{ detailInfo.payTypeNoteDesc }}</span
        >
        <span class="text-success" v-else>{{
          detailInfo.payTypeNoteDesc
        }}</span>
        <template v-if="detailInfo.audited !== '1'">
          <a
            href="javascript:void(0)"
            @click.stop="editPayType()"
            class="small float-end me-2"
            >修改</a
          >
        </template>

        {{ detailInfo.payRemark }}
      </dd>
      <dt class="col-4 text-end">金额</dt>
      <dd class="col-8">{{ detailInfo.billSum }}</dd>
      <dt class="col-4 text-end">成本</dt>
      <dd class="col-8">{{ detailInfo.cost }}</dd>
      <dt class="col-4 text-end">利润</dt>
      <dd class="col-8">{{ detailInfo.profit }}</dd>
      <dt class="col-4 text-end">审核日期</dt>
      <dd class="col-8">
        <span
          v-if="detailInfo.audited === '1' && detailInfo.auditDate !== null"
          >{{ detailInfo.auditDate }}</span
        >
        <span v-else-if="detailInfo.audited === '1'">已审核</span>
        <span class="text-danger" v-else>未审核</span>
      </dd>
      <dt class="col-4 text-end">收款状态</dt>
      <dd class="col-8">
        <template v-if="detailInfo.bePaid === '0'">
          <span class="text-danger">未收</span>
        </template>
        <template v-else-if="detailInfo.bePaid === '1'">
          <span class="text-success strong">已收</span>
          <button
            class="btn btn-sm btn-danger float-end me-2"
            @click.stop="undoWriteOff()"
            v-if="isAdmin"
          >
            撤销
          </button>
        </template>
      </dd>
      <dt class="col-4 text-end">付款状态</dt>
      <dd class="col-8">
        <span class="text-danger" v-if="detailInfo.paymentStatus === 0"
          >未付</span
        >
        <span class="text-success strong" v-else>
          已付
          <button
            class="btn btn-sm btn-danger float-end me-2"
            @click.stop="undoFinishPayment()"
            v-if="isAdmin"
          >
            撤销
          </button>
        </span>
      </dd>
      <dt class="col-4 text-end">结算日期/单</dt>
      <dd class="col-8">
        {{ detailInfo.settleDate }}
        <span class="text-info small">{{ detailInfo.settlementNo }}</span>
        <template
          v-if="
            detailInfo.settlementNo !== null &&
            detailInfo.settlementNo.length > 0 && 
            detailInfo.bePaid === '0' &&
            detailInfo.paymentStatus === 0
          "
        >
          <button
            type="button"
            class="btn btn-sm btn-danger"
            @click.stop="delSettlementNo()"
          >
            删除
          </button>
        </template>
      </dd>
      <dt class="col-4 text-end">销账日期/备注</dt>
      <dd class="col-8">
        {{ detailInfo.writeOffDate }}
        <span class="text-info small">{{ detailInfo.writeOffMemo }}</span>
      </dd>
      <dt class="col-4 text-end">收款单</dt>
      <dd class="col-8">{{ detailInfo.receiptNo }}</dd>
      <dt class="col-4 text-end">订单号</dt>
      <dd class="col-8">
        <template v-if="isFlightBill">
          <router-link
            :to="`/h5/flt/order/0?orderNo=` + detailInfo.orderNo"
            class="text-info"
            >{{ detailInfo.orderNo }}</router-link
          >
        </template>
        <template v-else-if="detailInfo.billType === '5'">
          <router-link
            :to="`/h5/flt/refund/order/0?orderNo=` + detailInfo.orderNo"
            class="text-info"
            >{{ detailInfo.orderNo }}</router-link
          >
        </template>
        <template v-else>
          {{ detailInfo.orderNo }}
        </template>
      </dd>
      <dt class="col-4 text-end">原始单号</dt>
      <dd class="col-8">{{ detailInfo.flightOrderNo }}</dd>
      <dt class="col-4 text-end">录入时间</dt>
      <dd class="col-8">{{ detailInfo.createTime }}</dd>
      <dt class="col-4 text-end">备注</dt>
      <dd class="col-8">
        {{ detailInfo.remark }}
        <a
          href="javascript:void(0)"
          @click.stop="editRemark()"
          class="small float-end me-2"
          >修改</a
        >
      </dd>
    </dl>

    <div class="card-body text-center py-2 row">
      <template v-if="detailInfo.audited !== '1'">
        <button
          type="button"
          class="btn btn-success mb-2"
          @click.stop="auditBillDone()"
        >
          审核通过
        </button>
        <button
          type="button"
          class="btn btn-danger me-auto ms-auto"
          @click.stop="deleteBill()"
        >
          删除
        </button>
      </template>
      <template v-else-if="detailInfo.bePaid !== '1'">
        <button
          type="button"
          class="btn btn-success mb-2"
          @click.stop="writeOffBill()"
          v-if="isRoot"
        >
          销账
        </button>

        <button
          type="button"
          class="btn btn-danger mb-2"
          @click.stop="cancelBillAudited()"
        >
          取消审核
        </button>
      </template>

      <template
        v-if="detailInfo.paymentStatus === 0 && detailInfo.audited === '1'"
      >
        <button
          type="button"
          class="btn btn-primary me-auto ms-auto"
          @click.stop="finishPayment()"
          v-if="isRoot"
        >
          已付款
        </button>
      </template>
    </div>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
    <my-modal-update-customer
      ref="updateCustomerModal"
    ></my-modal-update-customer>
    <my-modal-supplier-update
      ref="updateSupplierModal"
    ></my-modal-supplier-update>
    <my-modal-pay-method-update
      ref="updatePayMethodModal"
    ></my-modal-pay-method-update>
    <my-modal-op1-update ref="updateOp1Modal"></my-modal-op1-update>
    <my-modal-change-date ref="updateDateModal">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-change-date>
    <my-modal-pay-type ref="modalPayType"></my-modal-pay-type>
  </div>
</template>

<script>
import {
  BILL_FLIGHT,
  BILL_HOTEL,
  BILL_TRAIN,
  BILL_REFUND,
  BILL_VAS,
  BILL_CHANGE,
  BILL_RENTAL_CAR,
} from "@/common/const.js";
import {
  auditBill,
  cancelBillAudited,
  changeBillCustomer,
  deleteBill,
  updateBillInfoSupplier,
  updateBillInfoPaymentMethod,
  updateBillInfoEtdzDate,
  updateBillInfoOp1,
  updateBillInfoRemark,
  updateBillInfoPayType,
  updateBillInfoOpDate,
  delSettlementNo,
  undoWriteOffBill,
  writeOffSingleBill,
  finishBillPayment,
  undoFinishBillPayment,
} from "@/api/bill.js";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";
import MyModalSupplierUpdate from "@/components/modal/my-modal-supplier-update.vue";
import MyModalPayMethodUpdate from "@/components/modal/my-modal-pay-method-update.vue";
import MyModalOp1Update from "@/components/modal/my-modal-op1-update.vue";
import MyModalUpdateCustomer from "@/components/modal/my-modal-customer-update.vue";
import MyModalChangeDate from "@/components/modal/my-modal-change-date.vue";
import MyModalPayType from "@/components/modal/my-modal-pay-type.vue";

export default {
  components: {
    MyModalPrompt,
    MyModalSupplierUpdate,
    MyModalPayMethodUpdate,
    MyModalOp1Update,
    MyModalUpdateCustomer,
    MyModalChangeDate,
    MyModalPayType,
  },
  props: {
    detailInfo: {
      type: Object,
    },
  },
  data() {
    return {
      customers: [],
      customerId: 0,

      modalTitle: "",
      modalNullable: false,

      printMode: "0",
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
    isRoot() {
      return this.$store.state.isRoot;
    },
    supplierId: function () {
      if (this.detail === null || this.detailInfo.supplier === null) {
        return 0;
      } else {
        return this.detailInfo.supplier.id;
      }
    },
    payMethodId: function () {
      if (this.detail === null || this.detailInfo.paymentMethod === null) {
        return 0;
      } else {
        return this.detailInfo.paymentMethod.id;
      }
    },
    isFlightBill() {
      return this.detailInfo.billType === BILL_FLIGHT;
    },
    isRefundBill() {
      return this.detailInfo.billType === BILL_REFUND;
    },
    isChangeBill() {
      return this.detailInfo.billType === BILL_CHANGE;
    },
    isHotelBill() {
      return this.detailInfo.billType === BILL_HOTEL;
    },
    isTrainBill() {
      return this.detailInfo.billType === BILL_TRAIN;
    },
    isVasBill() {
      return this.detailInfo.billType === BILL_VAS;
    },
    isCarBill() {
      return this.detailInfo.billType === BILL_RENTAL_CAR;
    },
    id() {
      return this.detailInfo.id;
    },
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    refresh: function () {
      this.searchBillDetail();
    },
    searchBillDetail: function () {
      this.$emit("refresh");
    },
    auditBillDone: function () {
      auditBill(this.id, (v) => this.commonShowMessage(v));
    },
    cancelBillAudited: function () {
      this.modalTitle = "请输入取消审核的原因";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          cancelBillAudited(this.id, { remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    changeCustomer: function () {
      this.$refs.updateCustomerModal
        .modal(0)
        .then((info) => {
          changeBillCustomer(
            this.id,
            {
              customerId: info.customerId,
              costCenter: info.costCenter,
              projectName: info.projectName,
            },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    deleteBill: function () {
      this.modalTitle = "确定要删除此账单？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          this.doDeleteBill();
        })
        .catch((ex) => {});
    },
    doDeleteBill: function () {
      deleteBill(this.id, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("删除成功");
          this.back();
        } else {
          this.showErrMsg("删除失败: " + jsonResult.errmsg);
        }
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status === "OK") {
        this.showErrMsg("操作成功");
        this.searchBillDetail();
      } else {
        this.showErrMsg("操作失败: " + jsonResult.errmsg);
      }
    },
    editSupplier: function () {
      this.$refs.updateSupplierModal
        .modal(this.supplierId)
        .then((info) => {
          updateBillInfoSupplier(
            this.id,
            { supplierId: info.supplierId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPayment: function () {
      this.$refs.updatePayMethodModal
        .modal(this.payMethodId)
        .then((info) => {
          updateBillInfoPaymentMethod(
            this.id,
            { paymentMethodId: info.payMethodId },
            (v) => this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editEtdzDate: function (oldVal) {
      this.modalTitle = "请输入新的出票日期: ";
      this.$refs.updateDateModal
        .modal(oldVal)
        .then((remark) => {
          updateBillInfoEtdzDate(this.id, { etdzDate: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editOp1: function (oldVal) {
      this.$refs.updateOp1Modal
        .modal(oldVal)
        .then((info) => {
          updateBillInfoOp1(this.id, { op1: info.op1 }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editRemark: function () {
      this.modalTitle = "请输入新的账单备注：";
      this.$refs.modalPrompt
        .modal()
        .then((remark) => {
          updateBillInfoRemark(this.id, { remark: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editPayType: function () {
      this.$refs.modalPayType
        .modal(this.detailInfo.payTypeNote)
        .then((payType) => {
          updateBillInfoPayType(this.id, { payType: payType }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    editOpDate: function (oldVal) {
      this.modalTitle = "请输入新的账单日期: ";
      this.$refs.updateDateModal
        .modal(oldVal)
        .then((remark) => {
          updateBillInfoOpDate(this.id, { opDate: remark }, (v) =>
            this.commonShowMessage(v)
          );
        })
        .catch((ex) => {});
    },
    delSettlementNo: function () {
      this.modalTitle = "确定从结算单中移除吗？";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then(() => {
          delSettlementNo(this.id, (v) => this.commonShowMessage(v));
        })
        .catch((ex) => {});
    },
    writeOffBill: function () {
      writeOffSingleBill(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
    undoWriteOff: function () {
      this.modalTitle = "确定撤销销账吗？请输入 OK";

      this.$refs.modalPrompt
        .modal("")
        .then((remark) => {
          const params = {
            billId: this.id,
            remark: remark,
          };
          console.log(params);

          undoWriteOffBill(params, (v) => {
            if (v.status !== "OK") {
              this.showErrMsg(v.errmsg, "danger");
            } else {
              this.showErrMsg("操作成功");
              this.refresh();
            }
          });
        })
        .catch((ex) => {});
    },
    finishPayment: function () {
      //完成支付
      finishBillPayment(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
    undoFinishPayment: function () {
      undoFinishBillPayment(this.id, (v) => {
        if (v.status !== "OK") {
          this.showErrMsg(v.errmsg, "danger");
        } else {
          this.showErrMsg("操作成功");
          this.refresh();
        }
      });
    },
  },
};
</script>